<template>
  <div class="w-full h-32 pl-10 pr-10">
    <CollapseContainer class="mt-5" title="效果展示">
      <!-- 直接使用图标  -->
      <p>gg 系列 <Icon icon="gg:loadbar-doc" /> </p>
      <p>majesticons 系列: <Icon icon="majesticons:airplane-line" /> </p>
      <p>自定义颜色: <Icon icon="tabler:alarm" color="red" /> </p>
      <p>自定义大小: <Icon icon="tabler:alarm" :size="25" /> </p>
      <p>自定义前缀: <Icon prefix="tabler" icon="alarm" /> </p>
    </CollapseContainer>

    <!-- 笔记 -->
    <CollapseContainer class="mt-5" title="使用说明">
      <markdown-viewer :value="getDoc()" />
    </CollapseContainer>

    <!-- 笔记 -->
    <CollapseContainer class="mt-5" title="源码">
      <markdown-viewer :value="getSource()" />
    </CollapseContainer>
  </div>
</template>
<script lang="ts" setup>
  import { CollapseContainer } from '@/components/Container';
  import { MarkdownViewer } from '@/components/Markdown';

  import { Icon } from '@/components/Icon';
</script>

<script lang="ts">
  function getDoc() {
    return `

## Iconify Icon
* vben admin 推进使用 Iconify 图标，Iconify 种类也很丰富，使用方式也很简单
* 官网: * <a href="https://icon-sets.iconify.design/majesticons/" target="_blank">Iconify 官方文档</a>
* 使用方式:
    * 引入 Icon 组件
    * Iconify 官网搜索图标，直接复制粘贴即可

## 常用属性

| 属性 | 类型 | 默认值 | 说明 | 示例 |
| :--- | :--- |  :--- |  :--- | :--- |
| icon | string |  | 图标名 | :spin="true" |
| prefix | string | | 图标分组 | prefix="tabler".实际的名称为 $prefix:$icon |
| color | string |  | 颜色 | color="red" |
| size | number | 16 |  | 图标默认大小 |

  `;
  }

  function getSource() {
    return `

\`\`\`html
\<template\>
  <p>gg 系列 <Icon icon="gg:loadbar-doc" /> </p>
  <p>majesticons 系列: <Icon icon="majesticons:airplane-line" /> </p>
  <p>自定义颜色: <Icon icon="tabler:alarm" color="red" /> </p>
  <p>自定义大小: <Icon icon="tabler:alarm" :size="25" /> </p>
  <p>自定义前缀: <Icon prefix="tabler" icon="alarm" /> </p>
\</template\>

\<script lang="ts" setup\>

  // 引入 iconify 相关图标库
  import { Icon } from '@/components/Icon';
}
\</script\>
\`\`\`
`;
  }
</script>
